{{#if this.shownFilters.length}}
  <div data-test-active-filter-list class="active-filter-list mb-7">
    <h3>Showing</h3>
    <div class="flex min-h-[30px] flex-wrap items-center gap-1">
      {{#each this.shownFilters as |filter|}}
        <Header::ActiveFilterListItem @filter={{filter}} />
      {{/each}}
    </div>
    <LinkTo
      data-test-clear-all-filters-link
      @query={{this.defaultQuery}}
      class="clear-all-link"
    >
      <FlightIcon @name="x-circle" class="mr-1" />
      Clear all
    </LinkTo>
  </div>
{{/if}}
